<div style="position: absolute; touch-action: none; padding: 50px; text-align: center; vertical-align: middle; border: 1px solid black; background-color: white; cursor: move;"
     _="-- this little maneuver is called The Akşimşek Gambit...
        on pointerdown(clientX, clientY)
          halt the event
          measure my x, y
          set xoff to clientX - x
          set yoff to clientY - y
          transition
              margin-top to '-10px'
              box-shadow to '8px 8px 2px 1px rgba(0, 0, 0, .2)'
            over 50ms
          repeat until event pointerup from document
            wait for pointermove(pageX, pageY) or
                     pointerup(pageX, pageY) from document
            add { left: ${pageX - xoff}px; top: ${pageY - yoff}px; }
          end
          transition margin-top to 0
              box-shadow to '0 0 0 0'
            over 50ms
">
   Drag me...
</div>
